<template>
  <div v-if="stage">
    <el-tabs v-if="stage.round?.length > 1" v-model="activeName">
      <el-tab-pane
        v-for="(item, index) in stage.round"
        :key="index"
        :label="item.name"
        :name="item.sort + ''"
      >
        <Judge
          :awards-id="awardsId"
          :round-info="item"
          :vote-state="stage.voteState"
          :stage-name="stage.name"
        />
      </el-tab-pane>
    </el-tabs>
    <Judge
      v-else-if="stage.round?.[0]"
      :awards-id="awardsId"
      :round-info="stage.round[0]"
      :vote-state="stage.voteState"
      :stage-name="stage.name"
    />
  </div>
</template>

<script setup lang="ts">
import Judge from './Judge.vue'
import { StageRoundVO } from '@/api/awards/reviewscene'

defineOptions({ name: 'JudgeWrapper' })

const props = defineProps<{
  awardsId: string
  stage: StageRoundVO | undefined
}>()

const activeName = ref('')

watch(
  props,
  () => {
    if (props.stage) {
      activeName.value = props.stage?.round?.[props.stage?.round?.length - 1]?.sort + '' ?? ''
    }
  },
  {
    immediate: true,
    deep: true
  }
)
</script>
